<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>首页</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no">
<meta name="keywords" content="">
<link href="css/index.css" rel="stylesheet">
<link href="css/reset.css" rel="stylesheet">
<link href="css/swiper-3.4.0.min.css" rel="stylesheet">
<link href="css/common.css" rel="stylesheet">
<link href="font/iconfont.css" rel="stylesheet">
<script src="js/phone.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/lazyload.min.js"></script>
</head>
<body>
<!-- 顶部 -->
    <header class="clearfix">
        <a class="fl" href="#">
            <i class="search-icon iconfont icon-sousuolansousuo"></i>
        </a>
        <h1 class="fl">
            <i style="font-size: .4rem;" class="iconfont icon-shouye"></i>
            <span>阅居</span>
        </h1>
        <a class="fl clearfix" href="personalCenter.html">
            <i style="margin-top: .09rem;" class="user-icon iconfont icon-head fr"></i>
        </a>
    </header>

<div class="container">
<!-- 轮播 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/banner.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/banner2.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/banner3.png" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
<!--         <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->    
    
        <!-- 如果需要滚动条 -->
<!--         <div class="swiper-scrollbar"></div> --> 
   </div>
<!-- 详细分类 -->
    <nav>
        <div class="wrapper">
            <ul class="clearfix">
                <li>
                    <a href="bedroom.html">
                        <i style="font-size: .5rem;" class="iconfont icon-woshi bg-orange"></i>
                        <h2>卧室</h2>
                    </a>
                </li>
                <li>
                    <a href="furnitureClassify.html">
                        <i style="font-size: .65rem;" class="bg-yellow iconfont icon-ic2 bg-orange"></i>
                        <h2>客厅</h2>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i style="font-size: .65rem;" class="iconfont icon-ic7 bg-orange bg-green"></i>
                        <h2>书房</h2>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i style="font-size: .5rem;" class="iconfont icon-canting bg-orange bg-blue"></i>
                        <h2>餐厅</h2>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i style="font-size: .5rem;" class="iconfont icon-chufang bg-orange bg-orange"></i>
                        <h2>厨房</h2>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i style="font-size: .6rem;" class="iconfont icon-yushi bg-orange bg-yellow"></i>
                        <h2>浴室</h2>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i style="font-size: .5rem;" class="iconfont icon-ertong bg-orange bg-green"></i>
                        <h2>儿童</h2>
                    </a>
                </li>
                <li>
                    <a href="recommend.html">
                        <i style="font-size: .5rem;" class="iconfont icon-iconfonthome bg-orange bg-blue"></i>
                        <h2>更多</h2>
                    </a>
                </li>
            </ul>
        </div>
    </nav>
<!-- 计算 -->
    <div class="compute">
        <div class="line"></div>
        <div class="title">
            <img class="lazy" data-original="img/counter.png" alt="">
            <span>算算你家装修多少钱</span>
        </div>
        <div style="width:7.5rem">
            <form action="" class="por">
                <input type="text" placeholder="请输入面积"><span class="poa">m<sup>2</sup></span>
                <select name="" id="" class="compSelect">
                    <option value="">现代简约</option>
                </select>
                <select name="" id="">
                    <option value="">中档宜居</option>
                </select>
                <button>获得本地精准报价</button>
            </form>
        </div>    
    </div>
<!-- 用户报价 -->
    <div class="money">
        <div class="bck">
            <img class="lazy" data-original="img/doorknob.png" alt="">
        </div>
        <div class="title">
            <p>今日已有<span>47714</span>户业主获得报价</p>
        </div>
        <div class="user">
            <ul>
                <li>4小时前</li>
                <li>189***386</li>
                <li>新古典</li>
                <li>85<span>m<sup>2</sup></span></li>
                <li>20万</li>
            </ul>
            <ul>
                <li>18分钟前</li>
                <li>159***085</li>
                <li>现代简约</li>
                <li>91<span>m<sup>2</sup></span></li>
                <li>7万</li>
            </ul>
        </div>
        <div class="mBot"></div>
    </div>
<!-- 优惠信息 -->
    <div class="pessage">
        <div class="pTop clearfix">
            <img class="lazy" data-original="img/case.png" alt=""><span><a style="color:#000;" href="discount.html">优惠信息</a></span><span class="more"><a style="color:#999;" href="discount.html">更多</a></span>
        </div>
        <div class="line"></div>
        <ul>
            <li><img class="lazy" data-original="img/salepic3.png" alt=""></li>
            <li><img class="lazy" data-original="img/salepic1.png" alt=""></li>
            <li><img class="lazy" data-original="img/salepic.png" alt=""></li>
        </ul>
    </div>
<!-- 精品推荐 -->
    <div class="saleM">
        <div class="pTop clearfix">
            <img class="lazy" data-original="img/salemore.png" alt=""><span><a style="color:#000;" href="recommend.html">精品推荐</a></span><span class="more"><a style="color:#999;" href="recommend.html">更多</a></span>
        </div>
        <div class="line"></div>
        <ul>
            <li>
                <img class="lazy" data-original="img/salemorepic.png" alt="">
                <p>实木书柜书架自由组合橡木书架置物架<span>¥2366.00</span></p>
            </li>
            <li>
                <img class="lazy" data-original="img/salemorepic2.png" alt="">
                <p>现代简约客厅落地灯LED立式台灯<span>¥418.00</span></p>
            </li>
        </ul>
    </div>
<!-- 各种风格 -->
    <div class="morestyle">
        <div class="pTop clearfix">
            <img class="lazy" data-original="img/morestyle.png" alt=""><span><a style="color:#000;" href="exhibition.html">各种风格</a></span><span class="more"><a style="color:#999;" href="exhibition.html">更多</a></span>
        </div>
        <div class="line"></div>
        <ul>
            <li>
                <img class="lazy" data-original="img/morestylepic.png" alt="">
                <div class="gre">
                    <p>现代简约风格</p>
                    <p>优质生活，从简单开始</p>
                </div>
            </li>
            <li>
                <img class="lazy" data-original="img/morestylepic2.png" alt="">
                <div class="gre">
                    <p>地中海风格</p>
                    <p>迷人风情，纵享生活</p>
                </div>
            </li>
        </ul>
        <div class="mBot"></div>
    </div>
<!-- 最新资讯 -->
    <div class="news">
        <div class="pTop clearfix">
            <img class="lazy" data-original="img/news.png" alt=""><span><a style="color:#000;" href="zixun.html">最新资讯</a></span><span class="more"><a style="color:#999;" href="zixun.html">更多</a></span>
        </div>
        <div class="line"></div>
        <div class="picWord">
            <div class="pic">
                <img class="lazy" data-original="img/newspic.png" alt="">
            </div>
            <div class="Word clearfix">
                <ul>
                    <li>1、定制家具:一时之兴还是长久之计</li>
                    <li>2、定制家具缺乏统一标准警惕假大空承诺</li>
                    <li>3、淘老家具需谨慎 红木专家支招辨真假</li>
                    <li>4、网售家具抽检80%不合格.</li>
                </ul>
            </div>
        </div>
    </div>
<!-- 门店地址    -->
    <div class="company">
        <div class="pTop clearfix">
            <img class="lazy" data-original="img/loacted.png" alt=""><span><a style="color:#000;" href="stores.html">门店地址</a></span><span class="more"><a style="color:#999;" href="stores.html">更多</a></span>
        </div>
        <div class="line"></div>
        <div class="cPic por">
            <div class="pic poa in-block">
                <img class="lazy" data-original="img/loacpic.png" alt="">
            </div>
            <div class="Word">
                <ul>
                    <li>
                        <h3>克诺家居</h3>
                    </li>
                    <li>(北蔡店)</li>
                    <li>上海闸北区沪太路(近汶水西路)</li>
                </ul>
            </div>
        </div>
        <div class="bPic por">
            <div class="pic poa in-block">
                <img class="lazy" data-original="img/loactpic2.png" alt="">
            </div>
            <div class="Word">
                <ul>
                    <li>
                        <h3>展华家居</h3>
                    </li>
                    <li>(徐汇店)</li>
                    <li>地址:上海徐汇区漕溪路126号(近中山西路)</li>
                </ul>
            </div>             
        </div>
        <div class="mBot"></div>
    </div>
</div>
<!-- 底部 -->
    <footer>
        <ul class="clearfix">
            <li>
                <a href="index.html">
                    <div class="footer-icon iconfont icon-shouye-copy green"></div>
                    <p>首页</p>
                </a>
            </li>
            <li><a href="furnitureClassify.html">
                <div class="footer-icon iconfont icon-fenlei"></div>
                <p>分类</p></a>
            </li>
            <li><a href="community.html">
                <div class="footer-icon iconfont icon-shequ"></div>
                <p>社区</p></a>
            </li>
            <li><a href="Carlist.html">
                <div class="footer-icon iconfont icon-iconfontgouwuche"></div>
                <p>购物车</p></a>
            </li>
            <li><a href="customize.html">
                <div class="footer-icon iconfont icon-pan"></div>
                <p>我的定制</p></a>
            </li>
            <li><a href="personalCenter.html">
                <div class="footer-icon iconfont icon-geren"></div>
                <p>个人中心</p></a>
            </li>
        </ul>
    </footer>
    <div class="stop"><p>Top</p></div>
<script src="js/swiper-3.4.0.min.js"></script>
<script src="js/index.js"></script>
<script>        
      var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal',//默认是垂直，现在是水平
        loop: true,
        speed:1500,
        autoplay:2000,//自动播，可以手动拖拽
        
        // 如果需要分页器
        pagination: '.swiper-pagination',
        
        // 如果需要前进后退按钮
        // nextButton: '.swiper-button-next',
        // prevButton: '.swiper-button-prev',
        
        // 如果需要滚动条
        // scrollbar: '.swiper-scrollbar',
      })
    $(function(){
        $(".lazy").lazyload({
            // placeholder:"loading.gif",
            effect:"fadeIn",
            // event:"click",
        });
    })       
</script>
</body>
</html>